<script setup>
import * as  echarts from "echarts"
import "whatwg-fetch"
import {onMounted, reactive, ref} from "vue"

const chartRef = ref();
let myChart = reactive();
let currentCode = '100000';
let preCode = ''

// 请求数据
const getMapData = async (code) => {
  try{
    const response = await fetch(`/Json/${code}.json`) // 替换为你的 JSON 文件路径
    return await response.json()
  }catch (error) {
    const geoJson = await getMapData("100000");
    mapOptions(geoJson);
  }
}

// 设置地图
const mapOptions = (geoJson) => {
  echarts.registerMap('mapJson', geoJson);
  const mapData = geoJson.features.map(({properties: {adcode, name}}) => {
    return {
      name,
      adcode
    }
  })
  const mapOptions = {
    geo: {
      show: false,
      map: 'mapJson',
      label: {
        normal: {
          show: false,
        },
        emphasis: {
          show: false,
        },
      },
      roam: true,
      itemStyle: {
        show: true,
        normal: {
          areaColor: 'transparent',
          borderColor: '#3fdaff',
          borderWidth: 2,
          shadowColor: 'rgba(63, 218, 255, 0.5)',
          shadowBlur: 30,
        },
        emphasis: {
          areaColor: '#2B91B7',
        },
      },
    },
    series: [
      {
        type: 'map',
        roam: false,
        label: {
          normal: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: 12,
              fontWeight: 500,
            },
          },
          emphasis: {
            textStyle: {
              color: 'rgb(183,185,14)',
            },
          },
        },

        itemStyle: {
          normal: {
            areaColor: '#003669',
            borderColor: '#3fdaff',
            borderWidth: 2,
            shadowColor: 'rgba(63, 218, 255,0.6)',
            shadowBlur: 35,
          },
          emphasis: {
            areaColor: '#2B91B7',
          },
        },
        zoom: 1.1,
        map: 'mapJson',
        data: mapData
      },
      {
        type: "scatter",
                                id: "scatter",
                                name: "scatter",
                                coordinateSystem: "geo",
      }
    ],
  }
  myChart.setOption(mapOptions, true);
}

const init = async () => {
  myChart = echarts.init(chartRef.value);
  const geoJson = await getMapData("100000");
  mapOptions(geoJson);
  mapClick();
};

const mapClick = () => {
  myChart.on("click", async (params) => {
    const originCode = params.data.adcode
    if (originCode) {
      preCode = currentCode;
      currentCode = originCode;
      const geoJson = await getMapData(originCode);
      console.log(geoJson,'geoJson')
      mapOptions(geoJson)
    }
  })
}

const mapBack = async () => {
  const geoJson = await getMapData(preCode);
  currentCode = preCode;
  mapOptions(geoJson)
}

onMounted(() => {
  init();
})
</script>

<template>
  <div class="wrapper">
    <div class="chart" ref="chartRef"/>
    <a @click="mapBack">返回</a>
  </div>
</template>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.chart {
  width: 100%;
  height: 100%;
}

a {
  position: absolute;
  top: 30px;
  right: 30px;
}
</style>
